import {ViewPlugin,EditorView,ViewUpdate} from "@codemirror/view"
import { Extension } from '@codemirror/state';
import { h } from "vue";

const docSizePlugin = ViewPlugin.fromClass(class {
  dom:HTMLElement;
  constructor(view:EditorView) {
    this.dom = view.dom.appendChild(document.createElement("div"))
    this.dom.style.cssText =
      "position: absolute; inset-block-start: 2px; inset-inline-end: 5px"
    this.dom.textContent = view.state.doc.length as unknown as string
  }

  update(update:ViewUpdate) {
    if (update.docChanged)
      this.dom.textContent = update.state.doc.length as unknown as string
  }

  destroy() { this.dom.remove() }
})

export function docSize(): Extension {
    return [docSizePlugin];
  }
  



